<template>
  <basic-dialog :visible="show"
                title="正常循环明细"
                isShowClose
                :min-width="'1000px'"
                @close="$emit('close')"
  >
    <div class="page-content padding-20">
        <q-table
          class="users-table scroll my-sticky-virt scroll-table myTable inherit"
          :columns="tableColumns"
          :data="tableData"
          row-key="id"
          :pagination.sync="pagination"
          color="primary"
          :hide-bottom="tableData.length != 0"
          style="max-height: 300px;margin: 0"
        >
          <template v-slot:body-cell-work="props">
            <q-td>
              {{props.row.productName || '—'}} <span  v-if="props.row.productName !== '无'">（{{props.row.processName}}）</span>
            </q-td>
          </template>
          <template v-slot:body-cell-programName="props">
            <q-td>
              {{props.row.programName || '—'}}
            </q-td>
          </template>
        </q-table>
      </div>
  </basic-dialog>
</template>

<script>
import { getNormalWorkpieces } from 'src/boot/status-monitor/machine'
import { date } from 'quasar'
import { MomentJsUtils } from '../../../assets/js/util'
import moment from 'moment'
import _ from 'lodash'
export default {
  name: 'normal-cycle',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    deviceId: {
      default: '',
      required: true
    },
    since: {
      default: '',
      required: true
    },
    before: {
      default: '',
      required: true
    }
  },
  data () {
    return {
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 表格列
      tableColumns: [
        { name: 'time', field: 'time', label: '时间', align: 'left' },
        { name: 'work', field: 'work', label: '作业', align: 'left' },
        { name: 'programName', field: 'programName', label: '主程序号', align: 'left' },
        { name: 'roundTime', field: 'roundTime', label: '循环用时', align: 'left' }
      ],
      tableData: []
    }
  },
  methods: {
    getNormalCycle () {
      if (this.deviceId && this.since && this.before) {
        getNormalWorkpieces(this.deviceId, this.since, this.before).then(res => {
          res.data.forEach(o => {
            const processName = this.$utils.label(o.processName)
            o.processName = (_.isNil(o.processNo) || o.processNo === -1) ? processName : `${o.processNo + 1}-${processName}`
            o.time = date.formatDate(new Date(o.time), 'YYYY-MM-DD HH:mm:ss')
            o.roundTime = MomentJsUtils.humanizeDurationPrecisely(moment.duration(o.spendTime, 's'), 's')
            o.productName = o.productName.length === 1 && o.productName.indexOf('-') === -1 ? '无' : o.productName
          })
          this.tableData = res.data
        }).finally(
          this.$emit('getDetailedCount')
        )
      } else {
        this.tableData = []
      }
    }
  },
  watch: {
    show: function (newVal) {
      // console.log(newVal)
      if (newVal) {
        this.getNormalCycle()
      }
    }
  }
}
</script>
